<template>
  <div class="border">
    <h3>这是childCom1组件</h3>
    <p>foo:{{ foo }}</p>
    <p>childCom1的$attrs{{ $attrs }}</p>
    <!-- $attrs中包含了在父组件中声明的不包含props:{}对象中声明的属性外的所有属性，当然也不包含class和style中声明的类和行内样式属性 -->
    <child-com2 v-bind="$attrs" v-on="$listeners"></child-com2>
  </div>
</template>
<script>
const childCom2 = () => import('./childCom2.vue');
export default {
  components: {
    'child-com2': childCom2
  },
  // 通常和v-bind="$attrs"捆绑使用
  inheritAttrs: false, // 设置值为false时，this.$attrs中可以刨除挂载在当前组件根所放置的父组件中且没有在props声明的属性的渲染（也不包括class和style设置样式的属性）
  props: {
    foo: String // foo作为prop属性绑定 父组件传入的值
  },
  created() {
    console.log(this.$attrs); // {boo: "html", coo: "css", doo: "vue", p-child: "从公已觉十年迟", title: "前端工匠"}
  }
};
</script>
<style lang="less" scoped></style>
